<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编程式的导航</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <button @click="toRouter('/user/test')">/user/test</button>
    <router-view></router-view>
  </div>

  <script>
    // 1. 定义路由组件
    // TODO: 「1」 我们在组件模板中添加了一个`router-view`, 用于嵌套的子组件渲染展示
    const User = {
      template: `
        <div class="user">
          <h2>USER {{ $route.params.id }}</h2>
          <router-view></router-view>
        </div>
      `
    };

    const Profile = {
      // TODO: 「3」 使用`$route.query`获取url传递的查询参数
      template: `
        <div class="profile">
          <h2>Profile {{ $route.query }}</h2>
        </div>
      `
    };

    const UserHome = { template: '<div>User子路由的默认渲染</div>' };
    const Foo = { template: '<div>foo</div>' };
    const Bar = { template: '<div>bar</div>' };
    const NotFound = { template: '<div>404</div>' };

    // 2. 定义路由
    const routes = [
      {
        path: '/user/:id',
        // TODO: 「2」 命令的路由需要使用到
        name: 'username',
        component: User,
        children: [
          {
            path: '',
            component: UserHome
          },
          {
            path: 'foo',
            component: Foo
          },
          {
            path: 'bar',
            component: Bar
          },
          {
            path: '*',
            component: NotFound
          }
        ]
      },
      {
        path: '/profile',
        component: Profile
      }
    ]

    // 3. 创建`router`实例
    const router = new VueRouter({
      routes
    })

    // 4. 创建`Vue`实例
    const app = new Vue({
      router,
      methods: {
        toRouter(str) {
          // 「1」 字符串
          this.$router.push(str);

          // 「2」 对象
          // this.$router.push({ path: str });

          const id = '123';

          // 「3」 命名的路由 => 配合动态路由使用 
          // TODO: name参数是定义路由组件中的一个参数
          // this.$router.push({ name: 'username', params: { id } });


          // 「4」 动态路由的另一种方式 => /user/123
          // this.$router.push({ path: `/user/${id}` });

          // 「5」 带查询参数, 渲染url为 /profile?plan="牛皮"
          // this.$router.push({ path: '/profile', query: { plan: '牛皮' } });

          // 「6」 注意: 如果提供了`path`参数, 那么`params`参数就会被忽略, 上述例子
          // this.$router.push({ path: `/profile`, params: { id } });

          // 「7」 前面使用的都是$router.push(), 跳转时会在浏览器中留下一个history记录, 我们可以使用$router.go()来控制这些记录
          // 在浏览器记录中前进一步, 等同于 window.history.forward()
          // this.$router.go(1);

          // 在浏览器记录中后退一步, 等同于 window.history.back()
          // this.$router.go(-1);

          // 前进3步
          // this.$router.go(3);

          // 如果 histort 记录不够用咋办？——咋办？默默失效呗
          // this.$router.go(-100);
          // this.$router.go(100);

          // 「8」 $router.replace() 与 $router.push()
          // 使用replace后会替换原有的history记录, 然后你就不能用$router.go()了，其余与push使用方式一致
          // this.$router.replace({ path: `/profile`, query: { name: 'Mr.chen' } });
        },
      }
    }).$mount('#app');
  </script>
</body>

</html>